<template>
  <div>
    <nut-config-provider :theme-vars="themeVars">
      <nut-swiper
        @change="changeSwiper"
        :height="450 + 'px'"
        :pagination-visible="true"
        :pagination-color="colors.themeColor"
        pagination-unselected-color="#808080"
      >
        <nut-swiper-item v-for="key in blockList" :key="key">
          <div
            flex
            flex-wrap
            :style="{
              color: props.res.data.textColor,
              height: 450 + 'px',
              borderRadius: props.res.data.round + 'px',
              backgroundColor: props.res.data.background
            }"
          >
            <div
              class="menu-item"
              @click="modelNavigateTo(item)"
              v-for="(item, index) in props.res.data.list?.slice(
                current * 10,
                (current + 1) * 10
              )"
              :key="index"
            >
              <div flex flex-a-c flex-col>
                <div v-if="props.res.data.model === 'default'">
                  <image
                    :style="{
                      width: 150 + 'px',
                      height: 150 + 'px'
                    }"
                    class="menu-img"
                    :src="item.img"
                  />
                </div>
                <div :style="{ fontSize: 30 + 'px' }" class="menu-title">
                  {{ item.title }}
                </div>
              </div>
            </div>
          </div>
        </nut-swiper-item>
      </nut-swiper>
    </nut-config-provider>
  </div>

  <!--
  <scroll-view :scroll-x="true" whitespace-nowrap
    :style="{ color: props.res.data.textColor, height: px2rpx(props.res.data.height) + 'rpx', borderRadius: px2rpx(props.res.data.round) + 'px', backgroundColor: props.res.data.background, }">

    <div class="menu-item" @click="modelNavigateTo(item)" v-for="(item, index) in props.res.data.list" :key="index">
      <div flex flex-a-c flex-col>
        <div v-if="props.res.data.model === 'default'">
          <image :style="{ width: px2rpx(150) + 'rpx', height: px2rpx(150) + 'rpx' }" class="menu-img" :src="item.img" />
        </div>
        <div :style="{ fontSize: px2rpx(30) + 'rpx' }" class="menu-title">{{ item.title }}</div>
      </div>
    </div>

  </scroll-view> -->
</template>
<script setup lang="ts">
import { colors } from '@/constants/injection-key'
import { px2rpx } from './px2rpx'
import { modelNavigateTo } from './tpl-v3'
const props = defineProps(['res'])
console.log('宫格数据', props)
const current = ref<number>(0)

const themeVars = reactive({
  swiperPaginationItemWidth: '20rpx'
})
const blockList: any = computed(() => {
  return Math.ceil(props.res!.data!.list!.length / 10)
})

function changeSwiper(e: any) {
  current.value = e
}
</script>
<style lang="scss" scoped>
image {
  display: block !important;
}

.menu-item {
  display: inline-block;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 20%;
  // flex: 1;
}
</style>
